<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes">
  
  
  <title>  React基础入门 |   写夜子的个人博客 </title>

 
  
    <link rel="icon" href="/images/favicon.png">
  


  <link rel="stylesheet" href="/nayo.min.css"> 
</head>  
  <body>   
    
      <header class="header">
	
  <nav class="header-nav">        
   
    <span class="iconfont icon-menu mobile-toggle"></span>   	

    <div class="header-menu">          
              
            
              <a class="header-menu-link" id="header-menu-home" href="/">首页</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-archives" href="/archives">归档</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-tags" href="/tags">标签</a>     
            
            
            
              <a class="header-menu-link" id="header-menu-about" href="/about">关于</a>     
            
            
            
              <a class="iconfont icon-menu-search header-menu-link" id="header-menu-search"></a>
            
                
    </div>  
    
  </nav>
</header>   

      <div class="container">       
          
          
            <section class="main">  
          

          <article class="post">
  
	<div class="post-header">

	<p class="post-title">	
		React基础入门
	</p>
			

	<div class="meta-info">	
	<span>
		11月 29, 2019
	</span>

	
	
		<i class="iconfont icon-words"></i>
		<span>
			5223
		</span>
	
</div>

</div> 
	 

	  <div class="post-content slideDownMin">

		

			
					<ol>
<li>React组件采用ES6 class的写法:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> React, &#123;Component&#125; <span class="keyword">from</span> <span class="string">'react'</span>;</span><br><span class="line"><span class="class"><span class="keyword">class</span> <span class="title">Children</span> <span class="keyword">extends</span> <span class="title">Component</span></span>&#123;</span><br><span class="line">    <span class="keyword">constructor</span>(props)&#123;</span><br><span class="line">        <span class="keyword">super</span>(props); <span class="comment">//调用父类的构造函数，固定写法,继承父组件属性</span></span><br><span class="line">        <span class="keyword">this</span>.state = &#123;</span><br><span class="line">            value:<span class="string">''</span>,</span><br><span class="line">            list:[]</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">   render()&#123;</span><br><span class="line">       <span class="keyword">return</span> ();</span><br><span class="line">   &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<a id="more"></a>
<ol start="2">
<li>标签添加样式类名，不能用’’class”,要用”className”</li>
<li>利用props继承父组件的属性（单向数据流）；</li>
<li>利用state声明响应式变量；</li>
<li>React事件的钩子命名采用小驼峰写法：onClick 、 onChange等；</li>
<li><p>要在constructor函数里面为事件绑定this，写法：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.inputChange=<span class="keyword">this</span>.inputChange.bind(<span class="keyword">this</span>);</span><br></pre></td></tr></table></figure>
<p>这种在组件里面可以直接使用：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">onChange=&#123;<span class="keyword">this</span>.inputChange&#125;；</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>如果不使用这种方式，则可以在声明函数时采用“箭头函数”的写法:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">inputChange = <span class="function">(<span class="params">e</span>) =&gt;</span>&#123;</span><br><span class="line">    <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">        inputValue : e.target.value</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<ol start="7">
<li><p>利用循环生成节点时，要记得为item设置’key’：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"> &lt;ul&gt;</span><br><span class="line">      &#123;</span><br><span class="line">           <span class="keyword">this</span>.state.list.map(<span class="function">(<span class="params">item,index</span>) =&gt;</span>&#123;</span><br><span class="line">               <span class="keyword">return</span> <span class="xml"><span class="tag">&lt;<span class="name">li</span> </span></span></span><br><span class="line"><span class="xml">               key=&#123;index+item&#125;</span></span><br><span class="line"><span class="xml">               onClick=&#123;this.deleteItem.bind(this,index)&#125;</span></span><br><span class="line"><span class="xml">               &gt;</span></span><br><span class="line"><span class="xml">               &#123;item&#125;</span></span><br><span class="line"><span class="xml">               <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span></span><br><span class="line">           &#125;)</span><br><span class="line">      &#125;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>在React里面不允许直接操作state.例如要删除state里面一个数组的某一项，应该先拷贝一份要操作的那个数组，然后对拷贝的数组进行操作，操作完成之后，将state里面那个数组更新为操作之后的数组：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> list = <span class="keyword">this</span>.state.list; <span class="comment">//先拷贝一份</span></span><br><span class="line">        list.splice(index,<span class="number">1</span>); <span class="comment">//对拷贝这个数组进行操作</span></span><br><span class="line">        <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">            list:list  <span class="comment">//操作之后更新</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>也就是说不能像这样：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">this</span>.state.list.splice(index,<span class="number">1</span>) <span class="comment">//直接操作state</span></span><br><span class="line">    <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">        list:<span class="keyword">this</span>.state.list</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
</li>
<li><p>JSX写注释的方法:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&#123;<span class="comment">/*  这是注释 */</span>&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>React 通过preventDefault()来阻止默认行为：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">handleClick</span>(<span class="params">e</span>) </span>&#123;</span><br><span class="line">    e.preventDefault();</span><br><span class="line">    <span class="built_in">console</span>.log(<span class="string">'The link was clicked.'</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>label使用’for’属性，实现点击label即可启用输入框的光标，在React里面for要设置为’htmlFor’：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;label htmlFor=<span class="string">"haha"</span>&gt;增加选项：&lt;<span class="regexp">/label&gt;</span></span><br><span class="line"><span class="regexp">    &lt;input id="haha" className="input" value=&#123;this.state.inputValue&#125; onChange=&#123;this.inputChange.bind(this)&#125; /</span>&gt;</span><br><span class="line">    &lt;button onClick=&#123;<span class="keyword">this</span>.addList.bind(<span class="keyword">this</span>)&#125;&gt; 确定 &lt;<span class="regexp">/button&gt;</span></span><br><span class="line"><span class="regexp">&lt;/</span>div&gt;</span><br></pre></td></tr></table></figure>
</li>
<li><p>React父组件向子组件传值：属性名 = {变量}</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;Children content=&#123;item&#125;&gt;<span class="xml"><span class="tag">&lt;/<span class="name">Children</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<p>在子组件中使用:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;&#123;<span class="keyword">this</span>.props.content&#125;&#125;&lt;<span class="regexp">/div&gt;</span></span><br></pre></td></tr></table></figure>
</li>
<li><p>子组件调用父组件的方法，将父组件的方法作为参数传递过去：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;XuanXiangKaItem </span><br><span class="line">   key=&#123;index+item&#125; </span><br><span class="line">   content=&#123;item&#125; </span><br><span class="line">   index=&#123;index&#125;  </span><br><span class="line">   deleteItem = &#123;<span class="keyword">this</span>.deleteItem.bind(<span class="keyword">this</span>)&#125;</span><br><span class="line">/&gt;</span><br></pre></td></tr></table></figure>
<p>子组件调用:</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">handleDelete()&#123;</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="keyword">this</span>.props.index);</span><br><span class="line">        <span class="keyword">this</span>.props.deleteItem(<span class="keyword">this</span>.props.index);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>在子组件里面，不能直接去修改props传递过来的值，因为react是单向数据流。如果要在子组件里面更改父组件的值，应当将父组件里面的方法通过props一起传递到子组件，然后在子组件里面调用父组件传递过来的方法。</p>
</li>
<li><p>子组件里面校验父组件传递过来的值，使用PropTypes进行校验：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> PropTypes <span class="keyword">from</span> <span class="string">'prop-types'</span>;</span><br><span class="line">XuanXiangkaItem.propTypes= &#123;  <span class="comment">//写在class之后</span></span><br><span class="line">    content:PropTypes.string.isRequired <span class="comment">//isRequired表示这个参数必须传</span></span><br><span class="line">    index:PropTypes.number,</span><br><span class="line">    deleteItem:PropTypes.func</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
<li><p>指定props参数的默认值,使用defaultProps：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">XuanXiangkaItem.defaultProps = &#123;</span><br><span class="line">    content:<span class="string">'默认值'</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>17.ref的基本使用:<br>//在组件里面<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">ref=&#123;(input)=&gt;(<span class="keyword">this</span>.input = input)&#125;  <span class="comment">//利用箭头函数来绑定</span></span><br><span class="line"></span><br><span class="line"> 在函数操作中使用:</span><br><span class="line"> <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">            <span class="comment">// inputValue : e.target.value</span></span><br><span class="line">            inputValue : <span class="keyword">this</span>.input.value   <span class="comment">//取代e.target.value</span></span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure></p>
<ol start="18">
<li>ref和setState一起使用的一个坑:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">    &lt;ul ref=&#123;(ul) =&gt; (<span class="keyword">this</span>.ul = ul)&#125;&gt;</span><br><span class="line">                   &#123;</span><br><span class="line">                        <span class="keyword">this</span>.state.list.map(<span class="function">(<span class="params">item,index</span>) =&gt;</span>&#123;</span><br><span class="line">                            <span class="keyword">return</span> (</span><br><span class="line">                               &lt;XuanXiangKaItem </span><br><span class="line">                               key=&#123;index+item&#125; </span><br><span class="line">                               content=&#123;item&#125; </span><br><span class="line">                               index=&#123;index&#125;  </span><br><span class="line">                               deleteItem = &#123;<span class="keyword">this</span>.deleteItem.bind(<span class="keyword">this</span>)&#125;</span><br><span class="line">                               /&gt;</span><br><span class="line">                            )</span><br><span class="line">                        &#125;)</span><br><span class="line">                   &#125;</span><br><span class="line">&lt;<span class="regexp">/ul&gt;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>在调用setState之后打印ul数组的长度:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> addItem = <span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">            list:[...this.state.list,<span class="keyword">this</span>.state.inputValue],</span><br><span class="line">            inputValue:<span class="string">''</span></span><br><span class="line">        &#125;)</span><br><span class="line">        <span class="built_in">console</span>.log(<span class="built_in">console</span>.log(<span class="keyword">this</span>.ul.querySelectorAll(<span class="string">'div'</span>).length)); <span class="comment">// 在这里调用</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>打印结果会少一个，因为setState是异步的，我们虚拟Dom还没更新就去调用console.log了。<br>解决方法,利用setState的回调函数:<br><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">addItem = <span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">        <span class="keyword">this</span>.setState(&#123;</span><br><span class="line">            list:[...this.state.list,<span class="keyword">this</span>.state.inputValue],</span><br><span class="line">            inputValue:<span class="string">''</span></span><br><span class="line">        &#125;,()=&gt;&#123; <span class="comment">//这里调用setState的回调</span></span><br><span class="line">            <span class="built_in">console</span>.log(<span class="keyword">this</span>.ul.querySelectorAll(<span class="string">'div'</span>).length);</span><br><span class="line">        &#125;) </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure></p>
<p>适用场景：我们在进行了一些数据更新之后，我们想要立即拿到变化之后的虚拟Dom，我们就应当用setState的回调函数。</p>
<ol start="19">
<li>React的生命周期主要分为四大阶段:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">Initialization:初始化阶段。</span><br><span class="line">Mounting: 挂载阶段。</span><br><span class="line">Updation: 更新阶段。</span><br><span class="line">Unmounting: 销毁阶段</span><br></pre></td></tr></table></figure>
</li>
</ol>
<p><img src="https://user-gold-cdn.xitu.io/2019/11/6/16e413ee7b1b54b9?w=2428&amp;h=868&amp;f=png&amp;s=176530" alt="QQ20191106-101739@2x.png"></p>
<p>可以看出，render函数是一个生命周期函数，当props、state变化时，都会自动进行调用.</p>
<p>constructor不能称为是生命周期函数，他仅仅是ES6的语法，虽然它和生命周期函数的性质一样，但不能认为是生命周期函数。应该把它看成是React的Initialization阶段，定义属性（props）和状态(state)。</p>
<p>Mounting: 挂载阶段<br>Mounting阶段，即是挂载阶段，伴随着整个虚拟Dom的生成，这个周期里面有三个生命周期函数:</p>
<ol>
<li>componentWillMount:在组件即将被挂载到页面的时刻执行，   </li>
<li>render：页面props和state发生变化时执行，   </li>
<li>componentDidMount:组件挂载(插入dom树中)完成之后执行。         </li>
</ol>
<p>需要注意的问题：componentWillMount和componentDidMount，这两个周期函数，只会在页面刷新时执行一次，但是render则不同，只要页面props和state发生变化时就会执行。所以我们可以将异步请求写在componentWillMount和componentDidMount钩子函数里面，但是在使用RN时，使用componentWillMount钩子会有冲突。所以建议在componentDidMount函数里作异步请求。</p>
<p>Updation: 更新阶段<br>Updation阶段主要是更新阶段，有两个部分组成，一个是props属性的改变，另一个是state状态的改变。       </p>
<ol>
<li>shouldComponentUpdate:它要求返回一个布尔类型的结果，必须有返回值，简单点说，就是返回true，就同意组件更新;返回false,就反对组件更新,    </li>
<li>componentWillUpdate:在组件更新之前，但shouldComponenUpdate之后被执行。但是如果shouldComponentUpdate返回false，这个函数就不会被执行了,    </li>
<li>componentDidUpdate：组件更新完成之后执行。    </li>
</ol>
<p>Unmounting: 销毁阶段<br>Unmounting是指组件的销毁阶段</p>
<ol>
<li>componentWillUnmount：组件从页面中删除的时候执行   </li>
</ol>
<p>还有一个特殊的生命周期函数：componentWillReceiveProps 函数。     </p>
<p>componentWillReceiveProps:子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。       </p>
<ol start="20">
<li>可以利用生命周期函数的一些特性对程序的性能进行优化:<br>例如父组件有个输入框，输入框的值传递props到子组件，引起子组件重新调用render函数，即是重新渲染，但是我们不希望我们输入时，子组件就在不停的调用render，这样会引起性能损耗，我们只是希望当我们输入完成之后，子组件的render调用就行了，在这种情况下面，我们就可以利用生命周期来实现性能优化。我们监听子组件的更新周期，对传递的props进行前后比较:<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"> shouldComponentUpdate(nextProps,nextState)&#123;</span><br><span class="line">        <span class="keyword">if</span>(nextProps.content !== <span class="keyword">this</span>.props.content)&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">true</span></span><br><span class="line">        &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">            <span class="keyword">return</span> <span class="literal">false</span></span><br><span class="line">        &#125;</span><br><span class="line">&#125;<span class="comment">//shouldComponentUpdate有两个参数：nextProps:变化后的属性;nextState:变化后的状态;</span></span><br></pre></td></tr></table></figure>
</li>
</ol>
<p>未完待续…</p>
<p>参考自React官网和技术胖博客</p>
  	
					
	  </div>     
	  

	
<div class="post-meta">
      	

      
        <i class="iconfont icon-tag"></i>     
          <a class="tag-link" href="/tags/React/">React</a>    
      	
</div>





<div class="post-footer">
  <div class="pf-left">
      <img class="pf-avatar" src="http://wx2.sinaimg.cn/mw690/89296167gy1fu5ph67x17j21kw1kwhdu.jpg">
      <p class="pf-des">hi,我是写夜子,希望你有愉快的一天.</p>
  </div>

  <div class="pf-right">           
      <div class="pf-links">
        




<span class="donate-btn">
	<span class="iconfont icon-donate"></span>
</span>


<div id="donate-box" class="sildeUpMin">

	<span class="donate-cancel iconfont icon-cancel"></span>

	<div class="donate-img-box">
		<img id="donate-qr-wechat" class="noLazyLoad donate-img" src="/images/donate1.png" alt="No Donate Image!">	
		<img id="donate-qr-alipay" class="noLazyLoad donate-img" src="/images/donate2.png" alt="No Donate Image!">	
	</div>

	<span class="donate-word">世界美好 你也是</span>

	<div class="donate-list">
		<span class="iconfont icon-donate-wechat"></span>
		<span class="iconfont icon-donate-alipay"></span>
	</div>

</div>

 
        
	
<script id="-mob-share" src="http://f1.webshare.mob.com/code/mob-share.js?appkey=21d601593a1de"></script>
	
	<span class="share-btn">
	<span class="iconfont icon-share"></span>
	</span>


	<div class="-mob-share sildeUpMin">
		   			             
            <a class="iconfont  icon-share-qq -mob-share-qq"></a>		
     	   			             
            <a class="iconfont  icon-share-weixin -mob-share-weixin"></a>		
     	   			             
            <a class="iconfont  icon-share-weibo -mob-share-weibo"></a>		
     	   			             
            <a class="iconfont  icon-share-douban -mob-share-douban"></a>		
     	   			             
            <a class="iconfont  icon-share-facebook -mob-share-facebook"></a>		
     	   			             
            <a class="iconfont  icon-share-twitter -mob-share-twitter"></a>		
     	   			             
            <a class="iconfont  icon-share-google -mob-share-google"></a>		
     	   
	</div>	

      </div>  
    <nav class="pf-paginator">
      
         
          <a href="/2019/12/03/commitizen、cz-customizable、eslint、prettier、husky、commitlint搭建前端git提交规范/" data-hover="commitizen、cz-customizable、eslint、prettier、husky、commitli...">上一篇</a>      
            
        
      
        
        <a href="/2019/11/28/Javascript 原型和原型链深度解析/" data-hover="Javascript 原型和原型链深度解析"> 下一篇</a>
            
  </nav>   
  </div>
</div> 
	
	
</article>

          </section> 
      </div>            
    
    <a id="backTop">
      <span>
        <i class="iconfont icon-backtotop"></i>
      </span>
    </a> 

  
    
    <div class="search-container sildeUpMin">
        <div class="search-header">
            <input type="text" placeholder="输入你想搜索的" id="search-input" class="search-input">  
            <span class="search-cancel iconfont icon-cancel"></span>
        </div>
        <div id="search-result" class="search-result"></div>
    </div>
 
     <div class="mobile-menu">      

      
      <img class="mobile-menu-icon" src="/images/favicon.png">   
      

         
            

            <a class="mobile-menu-link" href="/">首页
            </a>
            
         
            

            <a class="mobile-menu-link" href="/archives">归档
            </a>
            
         
            

            <a class="mobile-menu-link" href="/tags">标签
            </a>
            
         
            

            <a class="mobile-menu-link" href="/about">关于
            </a>
            
         
                          

            <a class="mobile-menu-link mobile-menu-search" href="#">搜索 </a>                 
            
         
      
</div>        
    


<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?636802045446222199ae541e32c8133e"; 
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>





     
    




<footer id="footer">


		<div class="footer-copyright">
		&copy;
		
		2018-
		
		2020

		Xieyezi
		<br>

		Copyright
		<a href="https://github.com/xieyezi" target="_blank">Xieyezi</a>
		</div>

</footer>
   

  

    <script src="/nayo.bundle.js"></script>           
  </body>        
</html>